 <script lang="ts" setup>
	import { ref, onMounted } from 'vue'
	import { getAllArticlesBytnId } from "@/api/article.js"
	// import mpHtml from 'mp-html/dist/uni-app/components/mp-html/mp-html'


	const props = defineProps({
		id: {
			type: [Number, String],
			default: ''
		},
	})

	let content = ref();

	const getAll = () => {
		let data = {
			id: props.id,
			tenantId: "0"
		}
		getAllArticlesBytnId(data).then(res => {
			if (res.data.code == 200) {

				content.value = res.data.data.records[0].content;

			}
		}).catch(error => {
			console.log(error)
		})
	}
	onMounted(() => {
		console.log("id", props.id)
		getAll();


	});
	const scrollTop = 0;

	const extractVideoUrl = (htmlString) => {
		// console.log(typeof (htmlString))
		if (htmlString != void 0) {
			const regex = /<source src=\"(.*?)\" type=\"video\/mp4\"\/>/;
			const match = htmlString.match(regex);
			return match ? match[1] : null;

		}
	}

	function playFullscreen(id) { uni.createVideoContext(id.toString(), this).requestFullScreen(); }
 </script>

 <template>
 	<img :src="'@/../static/img/bgIcon/video.svg'"
 		style="opacity: 0.2;width: 25%;position: absolute;top: 47%;right: 2%;" />
 	<Navigator :fixed="true" background-color="transparent" status-bar left-icon="back" left-text="返回" title="心理影片"
 		style="height: 3vh;" class="absolute">
 	</Navigator>
 	<view class="wh100p flex"
 		style="justify-content: center; align-items: center;background: linear-gradient(90deg, #0078BB 0%, #003E94 100%);padding: 2%;box-sizing: border-box;">
 		<view class=" mt20" style="width: 90%;height: 90%;">
 			<video id="v1" @play="playFullscreen('v1')" class="wh100p" :src="extractVideoUrl(content)"></video>
 		</view>

 	</view>
 </template>


 <style>
 	.scroll-Y {
 		height: 97vh;
 	}

 	.scroll-view_H {
 		white-space: nowrap;
 		width: 100%;
 	}

 	.scroll-view-item {
 		height: 100vh;
 		line-height: 300rpx;
 		text-align: center;
 		font-size: 36rpx;
 	}

 	.scroll-view-item_H {
 		display: inline-block;
 		width: 100%;
 		height: 300rpx;
 		line-height: 300rpx;
 		text-align: center;
 		font-size: 36rpx;
 	}

 	/deep/ .uni-video {
 		width: 1000px
 	}
 </style>